<template>
  <view class="self-info">
    <page-header v-if="isGetUserInfo" />
    <view
      v-else
      class="mock-page-header"
      :style="`padding-top:${pagePaddingTop}rpx`"
      @tap="getUserInfo"
    >
      <view class="mock-avatar"></view>
      点击获取微信头像和昵称
    </view>
    <view class="view-report" @tap="goToReport">
      <view class="icon-file" />
      <text>查看我的健康管理方案</text>
      <view class="icon-right" />
    </view>
    <view class="menu-list">
      <view class="menu-item" @tap="navigateToOrderList">
        <view class="icon icon-order" />
        <text>我的订单</text>
      </view>
      <!-- <view class="menu-item" @tap="openAddLSDevice">
        <view class="icon icon-device-manage" />
        <text>设备管理</text>
      </view> -->
      <view class="menu-item" @tap="goPrivacyManager">
        <view class="icon icon-privacy" />
        <text>隐私设置</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import PageHeader from "../../common-components/page-header";
export default {
  components: {
    PageHeader
  },
  data() {
    return {
      isGetUserInfo: false,
      pagePaddingTop: 44
    };
  },
  computed: {
    hasUserInfo() {
      return this.$store.state.user.userInfo.nickName !== null;
    }
  },
  methods: {
    goToReport() {
      Taro.navigateTo({
        url: "/pages/health-questionnaire/reportList/index"
      });
    },
    navigateToOrderList() {
      Taro.navigateTo({
        url: "/pages/sales/order/my-order/index"
      });
    },
    goPrivacyManager() {
      Taro.navigateTo({
        url: "/pages/privacyManager/index"
      });
    },
    openAddLSDevice() {
      // 跳转到乐心添加设备的H5页面
      // Taro.navigateTo({
      //   url: `plugin-private://wx43b1ab446b5db1e0/pages/device/list/index?hasPedometer=false`
      // });
    },
    getUserInfo() {
      Taro.showModal({
        title: "温馨提示",
        content: "点击获取微信头像和昵称",
        success: res => {
          if (res.confirm) {
            Taro.getUserProfile({
              desc: "用于显示用户微信头像和昵称",
              success: res => {
                this.$store.commit("setUserInfo", {
                  nickName: res.userInfo.nickName,
                  avatarUrl: res.userInfo.avatarUrl
                });
                this.isGetUserInfo = true;
              }
            });
          }
        }
      });
    },
    getSafeArea() {
      Taro.getSystemInfo().then(info => {
        this.statusBarHeight = info.statusBarHeight;
      });

      const { statusBarHeight } = Taro.getSystemInfoSync();
      const menuButtonObject = Taro.getMenuButtonBoundingClientRect();
      const { top, height } = menuButtonObject;
      const navBarHeight = height / 2 + (top - statusBarHeight) * 2;
      this.pagePaddingTop = (statusBarHeight + navBarHeight - 14) * 2;
    }
  },
  mounted() {
    this.getSafeArea();
    this.isGetUserInfo = this.hasUserInfo;
  }
};
</script>
